'use strict';

import React, {PropTypes} from 'react';

import {
    Image,
    Text,
    View,
    TouchableOpacity,
    StyleSheet,
} from 'react-native';
import Global from '../Commom/GlobalConst';

const styles = StyleSheet.create({
    container: {
        paddingTop: 10,
        height: 60,
        flexDirection: 'row',
        zIndex: 1,
        alignItems: 'center',
        backgroundColor: 'white',
        borderBottomColor: '#F5F5F5',
        borderBottomWidth: 1,
    },
    icon: {
        width: 17,
        height: 17,
    },
    titleText: {
        fontSize: 19,
        color: Global.FontColor.DimGray,
    },
    titleBox: {
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
    }
});

class ToolBar extends React.Component {

    render() {
        let {
            leftImage,
            title,
            rightImage,
            backgroundColor
        } = this.props;

        return (
            <View style={[styles.container, {backgroundColor}]}>
                <TouchableOpacity onPress={() => this.props.leftFunc()}>
                    <Image
                        source={leftImage}
                        style={[styles.icon, {marginLeft: 15,marginTop:2}]}
                        resizeMode={'contain'}
                    />
                </TouchableOpacity>
                <View style={[styles.titleBox,{
                    marginLeft: leftImage ? 0 : 40,
                    marginRight: rightImage ? 0 : 40,
                }]}>
                    <Text
                        style={styles.titleText}
                    >{title}</Text>
                </View>
                <TouchableOpacity onPress={() => this.props.rightFunc()}>
                    <Image
                        source={rightImage}
                        style={[styles.icon, {marginRight: 15}]}
                        resizeMode={'contain'}
                    />
                </TouchableOpacity>
            </View>
        )
    }
}
ToolBar.defaultProps = {
    leftImage: require('../../Image/back_icon.png'),
    rightImage: require('../../Image/share_icon.png'),
    backgroundColor: 'white'
};

ToolBar.propTypes = {
    leftImage: PropTypes.number,
    leftFunc: PropTypes.func.isRequired,
    title: PropTypes.string.isRequired,
    rightImage: PropTypes.number,
    rightFunc: PropTypes.func.isRequired,
    backgroundColor: PropTypes.string
};

export default ToolBar;